<template>
    <div>
        <mt-header class="plain" fixed>
            <mt-button slot="left" icon="back" @click="goBack">返回</mt-button>
            <div slot="right">
                <!-- <div class="icon"><img width="24" :src="img.more" alt="更多" @click="showMore"></div> -->
            </div>
        </mt-header>

        <div class="comment-button">
                <button class="button" @click='inputDialogOpen'>
                    <label class="label">发表评论</label>
                </button>
        </div>

        <div class="info-container">            
            <mt-loadmore ref="loadMore" :auto-fill="false" :top-method="refresh" :bottom-method="loadMore" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded">
            <ul class="comment" style="min-height:200px">
                <li v-for="(item) in replyList" :key="item.repyid">
                <div style="margin-top:14px;margin-bottom:12px;display: flex">
                    <div style="width:20%"><img style="width: 44px;height: 44px;border-radius: 50%;margin-left: 12px;" :src="img.personIcon"></div>
                    <div style="margin-left:12px;margin-right:12px; width:80%">
                    <div style="display: flex;justify-content: space-between">
                        <span style="font-size: 16px;color: #666666;">{{item.creatername || '匿名'}}</span>
                        <span style="font-size: 12px;color: #999999;">{{item.createtime | dateformat('YYYY-MM-DD HH:mm')}}</span>
                    </div>
                    <div style="margin-top:10px;text-align: left">
                        <span style="font-size: 14px;color: #666666;" v-html="$options.filters.htmlNewLine(item.content || '')"></span>
                    </div>
                    </div>
                </div>
                </li>
            </ul>
            </mt-loadmore>
        </div>
        <my-dialog ref="inputDialog" v-bind="inputDialogConfig" v-on:confirm="appraise">
            <div class="appraise" slot="content">
                <textarea class="appraise-text" v-model="appraiseContent" placeholder="请输入评论"></textarea>
            </div>
        </my-dialog>
    </div>
</template>


<script>


import personIconImg from '@/assets/images/personal/个人中心_完善资料_头像.png'

import Dialog from '@/components/dialog'

import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import { MessageBox } from 'mint-ui'
import utils from '@/utils'
import infoApi from '@/api/info'

export default {

    data() {
        return {
            allLoaded: false,
            replyList: [],
            infoId: '',
            pageNo: 0,
            pageSize: 5,
            appraiseContent: '',
            inputDialogConfig: {
                title: '评论',
                confirm: '确定',
                casncle: '取消'
            },

            img: {
                personIcon: personIconImg
            }
        }
    },

    mounted() {
        this.infoId = this.$route.query.id || ''
        this.refresh();
    },

    components: {
        myDialog: Dialog
    },

    methods: {
        goBack() {
            this.$router.push({
                path: '/information/detail',
                query: {
                    id: this.$route.query.id,
                    from: this.$route.query.from || ''
                }
            });
        },

        inputDialogOpen () {
            
            if (!utils.getUserToken()) {
                MessageBox.confirm('您还没有登录，现在要登录吗？', '温馨提示', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    closeOnClickModal: false,
                    type: 'info'
                }).then(() => {
                    this.$router.replace('/login')
                }).catch()
                return
            }
            
            this.$refs.inputDialog.open()
            this.appraiseContent = ''
        },

        appraise () {
            this.$refs.inputDialog.close()
            infoApi.addReply({
            params: {
                infoid: this.infoId,
                content: this.appraiseContent
            }
            }).then(resp => {
                // this.refresh()
                Toast('您的评论已成功发送，请等待管理员审核')
            }).catch(resp => {
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '出错了');
                }
            })
        },

        getReplyList (onlyOnce) {
            infoApi.getReplyList({
                params: {
                    infoid: this.infoId,
                    pageno: this.pageNo++,
                    pagesize: this.pageSize,
                    // order: 'CREATETIME'
                }
            }).then(resp => {
                if (resp.result.length === 0) {
                    this.allLoaded = true
                } else {
                    this.replyList.push(...resp.result)
                }
                if (!onlyOnce) {
                    this.$refs.loadMore.onBottomLoaded()
                }
                
            }).catch(resp => {
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            })
        },

        refresh() {
            this.replyList = [];
            this.allLoaded = false;
            this.pageNo = 0;
            this.getReplyList(true);
            this.$refs.loadMore.onTopLoaded();
        },

        loadMore() {
            this.getReplyList()
        },

        handleBottomChange() {

        }
    }
}
</script>


<style lang="scss" scoped>
$scale: 1.2;
.comment-button {
    height: 30px;
    width: 100%;
    position: fixed;
    top: 55px;
    .button {
        background-color: #f2f2f2;
        border-radius: 5px;
        width: 100%;
        height: 30px;
        .label {
            font-size: 12px * $scale;
            color: #1f88f2;
            text-align: center;
        }
    }
}

.info-container {
    margin-top: 85px;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
    min-height: 500px;
    .comment {
        margin-top: 16px;
        box-sizing: border-box;
        li {
            border: 1px solid #dddddd;
            border-radius: 5px;
        }

        li:nth-child(n + 2) {
            margin-top: 12px;
        }
    }
}

.appraise {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    height: 200px;
    .appraise-text {
        width: 100%;
        height: 90%;
        font-size: 14px;
        line-height: 28px;
    }
}
</style>
